<!-- 需要去manifest.json中修改微信小程序的appid -->
<template>
	<view class="index-main">
		<!-- 吸顶 -->
		<u-sticky>
			<!-- 通过监听滚动事件，动态修改class，修改吸顶样式 -->
			<view class="index-toubuxinxi" :class="[{'index-toubuxinxi':xidingyangshi==0},{'index-toubuxinxi-new':xidingyangshi==1}]">
				<!-- 这里搜索框用的是uview-ui的demo，这么长一段是因为兼容性问题 -->
				<view class="index-sousuok">
					<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
					<!-- #ifndef APP-NVUE -->
					<u-input prefixIcon="search" placeholder="搜索商品">
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					<u--input prefixIcon="search" placeholder="搜索商品">
					<!-- #endif -->
						<u-button class="index-sousuoanniu" slot="suffix" text="搜索" size="mini" shape="circle" ></u-button>							
					<!-- #ifndef APP-NVUE -->
					</u-input>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					</u--input>
					<!-- #endif -->
				</view>
			</view>
		</u-sticky>
		<!-- 动态背景图片，如果要让背景图片盖过顶部导航栏，需要在pages.json里"navigationStyle": "custom" -->
		<!-- linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(255, 255, 255, 0) 10%背景图片从下往上10%的位置渐变白色 -->
		<view class="index-beijingtupian" :style="{ backgroundImage: `linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(255, 255, 255, 0) 10%),url(${tpsrc})`}">
			<view class="index-toubu">
				<!-- 轮播图 interval是间隔时间，indicator是否显示指示器面板，indicatorMode指示器样式，circular播放到结尾是否从头开始-->
				<u-swiper class="index-lunbotu"
					:list="swiperList"
					interval=5000
					indicator
					circular
					indicatorMode="dot"
					@change="changeSwiper"
					@click="clickSwiper"
					>
				</u-swiper>
			</view>
		</view>
		<view class="index-fenlei">
			<view class="index-gongge">
				<u-grid
						:border="false"
						col="5"
				>
					<u-grid-item
							v-for="(listItem,listIndex) in gridDList"
							:key="listIndex"
							@click="gridClick(listItem)"
					>
						<!-- <u-icon
								:customStyle="{paddingTop:20+'rpx'}"
								:name="listItem.name"
								:size="22"
						></u-icon> -->
						<u--image :showLoading="true" :src="listItem.img" width="50px" height="50px"></u--image>
						<text class="grid-text">{{listItem.title}}</text>
					</u-grid-item>
				</u-grid>
				<u-toast ref="uToast" />
			</view>
			<view class="index-xuanchuantu">
				<view class="index-xctimg" v-for="(item,index) in PublicityList" :key="index">
					<u--image  :showLoading="true" :src="item.img" width="320rpx" height="120px" radius="5px" @click="PublicityClick(item)"></u--image>
				</view>
			</view>
		</view>
		<view class="index-cnxh">
			<view class="index-cnxh-main">
				<view class="index-cnxh-title">猜你喜欢</view>
				<view class="index-cnxh-nr">
					<!-- 没采用scroll-view形式的上拉加载，使用了更简单粗暴的页面生命周期中的onReachBottom监听 -->
					<!-- <scroll-view class="orderlist" scroll-y="true" lower-threshold="200" @scrolltolower="scrollLower">
						<view class="" style="height: 200rpx;">元素111</view>
					</scroll-view> -->
					<!-- 左右两边的数据，使用瀑布流 -->
					<!-- 因为我看数据中还有广告页面，跳转过去是一个纯H5广告页，所以数据中右类型区分是购物页面还是广告页面 -->
					<view class="index-cnxh-left">
						<view v-for="(listItem,listIndex) in indexLikedatasLeft" :key="listItem.id" class="index-cnxh-zhu">
							<view v-if="listItem.type==1" class="index-cnxh-body-gg">
								<!-- type=1的是广告 -->
								<u--image :showLoading="true" :src="listItem.img" width="330rpx" height="180px" radius="10px 10px 0 0" @click="PublicityClick(listItem)"></u--image>
								<view>{{listItem.name}}</view>
							</view>
							<view v-else class="index-cnxh-body">
								<u--image :showLoading="true" :src="listItem.img" width="330rpx" height="180px" radius="10px 10px 0 0" @click="commodityClick(listItem)"></u--image>
								<view class="index-shop-name">{{listItem.name}}</view>
								<view class="index-shop-money"><text class="index-shop-money-text">¥</text>{{listItem.money}}</view>
								<view class="index-shop-store">{{listItem.store}}</view>
							</view>
						</view>
					</view>
					
					<view class="index-cnxh-right">
						<view v-for="(listItem,listIndex) in indexLikedatasRight" :key="listItem.id" class="index-cnxh-zhu">
							<view v-if="listItem.type==1" class="index-cnxh-body-gg">
								<!-- type=1的是广告 -->
								<u--image :showLoading="true" :src="listItem.img" width="330rpx" height="180px" radius="10px 10px 0 0" @click="PublicityClick(listItem)"></u--image>
								<view>{{listItem.name}}</view>
							</view>
							<view v-else class="index-cnxh-body">
								<u--image :showLoading="true" :src="listItem.img" width="330rpx" height="180px" radius="10px 10px 0 0" @click="commodityClick(listItem)"></u--image>
								<view class="index-shop-name">{{listItem.name}}</view>
								<view class="index-shop-money"><text class="index-shop-money-text">¥</text>{{listItem.money}}</view>
								<view class="index-shop-store">{{listItem.store}}</view>
								
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from "@/request/request.js"
	import configData from "@/static/indexdata.js"
	export default {
		data() {
			return {
				swiperList:[] ,
				tpsrc:'',
				keyword:'',
				gridDList: [],
				PublicityList:[],
				indexLikedatas:[],
				likeListIndex:0,
				indexLikedatasLeft:[],
				indexLikedatasRight:[],
				xidingyangshi:0
			}
		},
		onLoad() {
			this.getSwiperList();
			this.getGridDList();
			this.getPublicityData();
			this.getLikedatas();
			this.getMyWeizhi();
		},
		// 监听滚动，nvue暂不支持滚动监听，可用bindingx代替
		onPageScroll : function(e) { 
			//监听对顶部距离，大于0就修改class样式
			if(e.scrollTop >0 ){
				this.xidingyangshi = 1
			}else{
				this.xidingyangshi = 0
			}
		},
		// 监听下拉动作，下拉更新
		onPullDownRefresh(){
			console.log("下拉！！");
		},
		// 触底的事件，上拉加载
		onReachBottom() {
			console.log("上拉！！");
			// 模拟上拉请求数据
			let listlen = this.indexLikedatasLeft.length + this.indexLikedatasRight.length;
			let xxlist = [
			{
				id:listlen+1,
				img:"https://ts1.cn.mm.bing.net/th/id/R-C.91eff5271fee468e4d9f36fecf48b343?rik=zuuIEUgd0LFOIw&riu=http%3a%2f%2fi0.hdslb.com%2fbfs%2farchive%2fefa6819f2de8231afcb8d12890bf7b1655d0b0fe.jpg&ehk=WV22cB90Ve4g4fYs1gutrWiYG52SI7JyNGGzmJKjcmM%3d&risl=&pid=ImgRaw&r=0",
				type:0,
				url:'',
				data:'',
				money:'121',
				store:'湖州浙北大厦购物中心',
				name:'笔记本电脑'
			},
			{
				id:listlen+2,
				img:"https://img.sj33.cn/uploads/allimg/201006/29-1.jpg",
				type:0,
				url:'',
				data:'',
				money:'149',
				store:'南浔浙北大厦购物中心',
				name:'身体乳'
			},
			{
				id:listlen+3,
				img:"https://ts1.cn.mm.bing.net/th/id/R-C.91eff5271fee468e4d9f36fecf48b343?rik=zuuIEUgd0LFOIw&riu=http%3a%2f%2fi0.hdslb.com%2fbfs%2farchive%2fefa6819f2de8231afcb8d12890bf7b1655d0b0fe.jpg&ehk=WV22cB90Ve4g4fYs1gutrWiYG52SI7JyNGGzmJKjcmM%3d&risl=&pid=ImgRaw&r=0",
				type:0,
				url:'',
				data:'',
				money:'121',
				store:'湖州浙北大厦购物中心',
				name:'笔记本电脑'
			},
			{
				id:listlen+4,
				img:"https://img.sj33.cn/uploads/allimg/201006/29-1.jpg",
				type:0,
				url:'',
				data:'',
				money:'149',
				store:'南浔浙北大厦购物中心',
				name:'身体乳'
			}
		]
		this.likeListSort(xxlist);
		},
		methods: {
			// click(name) {
			// 	this.$refs.uToast.success(`点击了第${name}个`)
			// },
			// 获取轮播图数据和背景图初始化数据
			getSwiperList(){
				let imgList = [];
				for(let index in configData.indexSwiperImg){
					imgList.push(configData.indexSwiperImg[index].img);
					if(index==0){
						this.tpsrc = configData.indexSwiperImg[index].bjimg;
					}
				}
				this.swiperList = imgList;
			},
			// 背景图根据轮播图变化而变化
			changeSwiper(index){
				this.tpsrc = configData.indexSwiperImg[index.current].bjimg;
			},
			// 轮播图点击事件，跳转外部H5
			clickSwiper(index){
				let url = configData.indexSwiperImg[index].tzimg;
				uni.navigateTo({
					url: '/pages/webview/webview?url='+url
				});
			},
			// 获取宫格图标数据
			getGridDList(){
				this.gridDList = configData.indexGridData;
			},
			// 宫格图标点击事件
			gridClick(item){
				//数据结构中url是跳转的页面，data是参数
				//(我设想是跳转可能是纯H5页面，data参数带过去用户身份token数据之类，当然也可以直接从storage获取)
				console.log(item);
				uni.navigateTo({
					url:"../webview/webview?url="+item.url+"&data="+item.data
				});
			},
			// 获取广告宣传图数据
			getPublicityData(){
				this.PublicityList = configData.indexPublicityData;
			},
			// 广告宣传图的点击事件
			PublicityClick(item){
				//数据结构中url是跳转的页面，data是参数
				console.log(item);
				uni.navigateTo({
					url:"../webview/webview?url="+item.url+"&data="+item.data
				});
			},
			// // 上拉加载更多
			// scrollLower(){
			// 	console.log(111111);
			// },
			// 获取猜你喜欢数据
			getLikedatas(){
				let lodlist = configData.indexLikedatas;
				this.likeListSort(lodlist);
				
			},
			// 瀑布流左右数据
			likeListSort(sortList=[]){
				for(let index in sortList){
					if(index%2==0){
						this.indexLikedatasLeft.push(sortList[index])
					}else{
						this.indexLikedatasRight.push(sortList[index])
					}
				}
			},
			// 获取当前位置
			// uniapp中manifest.json添加permission和requiredPrivateInfos
			// 如果微信小程序开发工具里不起作用看一下是不是程序里app.json没有这两个参数，没有的话手动添加一下
			getMyWeizhi(){
				uni.getLocation({
					type: 'wgs84',
					success: function (res) {
						uni.setStorageSync("longitude", res.longitude)
						uni.setStorageSync("latitude", res.latitude)
						// console.log('当前位置的经度：' + res.longitude);
						// console.log('当前位置的纬度：' + res.latitude);
					}
				});
			},
			commodityClick(item){
				console.log(item.id)
				uni.navigateTo({
					url:"../commodity/commodity?id="+item.id
				});
			}
		}
	}
</script>

<style scoped>
	/* 添加一个transition的过渡效果,不然背景切换的时候太生硬了 */
	.index-beijingtupian{
		/* top: -200rpx; */
		width: 100vw;
		height: 500rpx;
		transition:all 1s linear;
		background-repeat:no-repeat;
		background-size:100% 100%;
	}
	.index-toubu{
		padding-top: 180rpx;
	}
	.index-toubuxinxi{
		width: 100vw;
		/* height: 70rpx; */
		position: absolute;
		transition:all 0.4s linear;
	}
	/* 吸顶动态修改样式 */
	.index-toubuxinxi-new{
		top:-2rpx;
		width: 100vw;
		height: 200rpx;
		background-color: #FF2135;
		position: absolute;
		transition:all 0.4s linear;
	}
	.index-sousuok{
		border-radius: 30rpx;
		margin-left: 20%;
		margin-top: 35rpx;
		width: 400rpx;
		background-color:white;
		position: absolute;
		top: 70rpx;
	}	
	/* 穿透修改第三方样式 */
	.index-main >>> .u-button--mini{
		height: 50rpx;
		background-color: #FF2135;
		color: white;
		margin-right: -10rpx;
	}
	.index-fenlei{
		position:relative;
		top: -80rpx;
		width: 90%;
		border-radius:15rpx;
		/* height: 500px; */
		background-color: white;
		/* border: black 1px solid; */
		margin: 0 auto;
	}
	.index-gongge{
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.index-gongge >>> .u-grid-item{
		margin-bottom: 10rpx;
		margin-top: 10rpx;
	}
	/* uniapp的flex默认是列排列 */
	.index-xuanchuantu{
		display: flex;
		flex-direction: row;
		flex-wrap:wrap;
		justify-content:space-around;
		align-content:space-between;
	}
	.index-xctimg{
		margin-top: 10rpx;
		margin-bottom: 20rpx;
	}
	.index-cnxh{
		background-color: #F5F5F5;
	}
	.index-cnxh-main{
		width: 90%;
		margin: 0 auto;
	}
	.index-cnxh-title{
		font-size: 40rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
	.index-cnxh-nr{
		overflow: auto;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	.index-cnxh-body{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		font-size: 28rpx;
		height: 480rpx;
		padding-bottom: 20rpx;
	}
	.index-cnxh-body-gg {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		font-size: 28rpx;
		height: 400rpx;
	}
	.index-cnxh-body-gg >>> .u-image__image{
		position: absolute;
		top:-14rpx
	}
	.index-cnxh-body >>> .u-image__image{
		position: absolute;
		top:-9rpx
	}
	.index-cnxh-zhu{
		border-radius:15rpx;
		background-color: white;
		margin-bottom: 22rpx;
		/* width: 97%; */
		width: 330rpx;
	}
	.index-shop-store{
		font-size: 10px;
		color: #787878;
	}
	.index-shop-money-text{
		font-size: 20rpx;
	}
	.index-shop-money{
		font-size: 36rpx;
		font-weight:900;
		/* margin-bottom: 4rpx; */
	}
	.index-shop-name{
		/* margin-bottom: 4rpx;
		margin-top: 4rpx; */
	}
</style>